<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 800px;
            border: 1px solid #ddd;
            padding: 20px;
            background-color: #feeeed;
            float: left;
        }
        #addbox{
            width: 300px;
            padding: 20px;
            background-color: #adcdef;
            position: fixed;
            right: 0px;
        }

    </style>
</head>
<body>
    <div id="box"></div>

    <div id="addbox">
        <form action="addform" onsubmit="return addData()">
            姓名：<input type="text" name="name"><br>
            性别：<input type="radio" name="sex" value="0">女
            <input type="radio" name="sex" value="1" checked>男
            <input type="radio" name="sex" value="2">保密

            年龄：<input type="text" name="age" >
            <button>提交</button>

        </form>
    </div>

    <script>
        function  addData(){
            var name = document.addform.name.value;
            var sex = document.addform.sex.value;
            var age = document.addform.age.value;

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if(xhr.readyState== 4){
                    if(xhr.status== 200){
                        console.log(xhr.responseText);
                        if(xhr.responseText>0){
                            var tr = table.insetrRow(table.rows.length);
                            tr.insertCell(0).innerHTML = xhr.responseText;
                            tr.insertCell(1).innerHTML = name;
                            tr.insertCell(2).innerHTML = sex;
                            tr.insertCell(3).innerHTML = age;
                            tr.insertCell(4).innerHTML = '';
                            alert('搞上了');
                        }else{
                            alert('no搞上');
                        }
                    }
                }
            }

            xhr.open('post','./php/5.php',true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send('name='+name+'&sex='+sex+'&age'+age);
            return false;

        }

        loadHtml();
        function loadHtml(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //清空之前的所有数据
                        box.innerHTML = '';
                        
                        var jsonStr = xhr.responseText;
                        var obj = JSON.parse(jsonStr);
                        console.log(obj);

                        //生成表格
                        var table = document.createElement('table');
                        table.width = '800';
                        table.border = 1;
                        table.cellSpacing = 0;
                        table.cellPadding = 5;
                        table.id = 'table';
                        box.appendChild(table);


                        //添加表头
                        var tr = table.insertRow(0);
                        addTH(tr,['序号','名字','性别','年龄','省份']);

                        //向表格添加数据
                        for (var i = 0; i < obj.length; i++) {
                            var tr =table.insertRow(i+1);
                            tr.insertCell(0).innerHTML = obj[i].id;
                            tr.insertCell(1).innerHTML = obj[i].name;
                            tr.insertCell(2).innerHTML = obj[i].sex;
                            tr.insertCell(3).innerHTML = obj[i].age;
                            tr.insertCell(4).innerHTML = obj[i].province;
                        }
                    }
                }
            }
            xhr.open('get','./php/4.php',true);
            xhr.send();
        }


        function addTH(tr,data){
            for (var i = 0; i < data.length; i++) {
                var th = document.createElement('th');
                th.innerHTML =data[i];
                tr.appendChild(th);
            }
        }



    </script>
</body>
</html>